<template>
  <a-sub-menu :key="menuData.path" v-bind="$attrs" v-if="menuData.children&&menuData.children.length>0">
    <!-- <template #expandIcon>
      <svg class="icon-sm menu-right-ico" aria-hidden="true">
        <use xlink:href="#icondaohanglan_jiantou1" v-if="!openKeys.some(item=>item===menuData.path)" />
        <use xlink:href="#icondaohanglan_xiangshangjiantou" v-else />
      </svg>
    </template> -->
   <template #icon v-if="menuData.meta.icon">
            <svg class="menu_icon" aria-hidden="true">
                <use :xlink:href="menuData.meta.icon"/>
            </svg>
     </template>
    <template #title>
      <div class="menu-name">{{ menuData.meta.name||menuData.name }}</div>
    </template>
    <template v-for="item in menuData.children" :key="item.key">
      <template v-if="!item.children||item.children.length===0">
        <a-menu-item :key="item.path" class="home-menu-item-router">
          <router-link :to="item.path" class="menu-name">{{  item.meta.name||item.name }}</router-link>
        </a-menu-item>
      </template>
      <template v-else>
        <home-menu-item :menuData="item" :key="item.meta.id" :openKeys="[]" />
      </template>
    </template>
  </a-sub-menu>
  <a-menu-item :key="menuData.path" class="home-menu-router" v-else>
     <template #icon v-if="menuData.meta.icon">
            <svg class="menu_icon" aria-hidden="true">
                <use :xlink:href="menuData.meta.icon"/>
            </svg>
     </template>
    <router-link :to="menuData.path" class="menu-name">{{ menuData.meta.name|| menuData.name }}</router-link>
  </a-menu-item>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
interface MenuDataInterfce {
  path: string;
  meta?: any;
  name: string;
  key: string;
  children?: MenuDataInterfce[];
}
export default defineComponent({
  name: 'wd_home_menu_item',
  props: {
    openKeys: {
      type: Object as PropType<string[]>,
      required: true
    },
    menuData: {
      type: Object as PropType<MenuDataInterfce>,
      required: true,
      default: () => ({
        path: '',
        meta: { id: '', icon: '' },
        name: '',
        key: '',
        children: []
      })
    }
  },
  setup () {
    return {}
  },
  methods: {},
  components: {}
})
</script>
